<script setup lang="ts">
  import {ref} from "vue";
  import router from "@/Router";
  import {currentSearchSongs, songSearch} from "@/store/songStore";
  import {res} from "@/store/dataType";
  import {findAllBySearchContains} from "@/Network/songApi";

  const emit = defineEmits(["search-word"])
  const sendSearchTab = async () => {
    if(songSearch.value==''){
      alert("搜索词不能为空")
    }else{
      console.log("search:")
      let search =ref({
        search:songSearch.value
      })
      console.log(search.value.search)
      let res1:res<any>= await findAllBySearchContains(search.value)
      currentSearchSongs.value = await res1.data
      emit('search-word',JSON.stringify(songSearch.value))
      // songSearch.value =''
      router.push("/search")
    }
  }

  /*搞一个userSearch来获取用户的输入，存一下search的搜索内容*/
function goBack(number){
  router.go(number)
}
</script>

<template>
  <div class="undoRedoSearch fixed flex gap-1 justify-start items-center h-15  py-3 bg-[#eaf6f4] rounded-xl">
    <div class="back-go  flex gap-0.5 ml--2">
      <svg xmlns="http://www.w3.org/2000/svg" @click="goBack(-1)" class="w-5 h-5 text-[#3fcde5]" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.25 3.75L5.75 8l4.5 4.25"/></svg>
      <svg xmlns="http://www.w3.org/2000/svg" @click="goBack(1)" class="w-5 h-5 text-[#3fcde5]" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.25L10.25 8l-4.5-4.25"/></svg>
    </div>
    <div class="search w-60 h-8 bg-[#dae6e6] rounded-xl  mx-2 pl-3 flex justify-start items-center gap-1">
      <svg @click="sendSearchTab"
             xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-[#3fcde5]" viewBox="0 0 16 16"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m11.25 11.25l3 3"/><circle cx="7.5" cy="7.5" r="4.75"/></g></svg>
      <input @keyup.enter="sendSearchTab" v-model="songSearch"
          class=" grow   bg-[#dae6e6]  outline-none mr-5" placeholder="搜索音乐"/>

    </div>
  </div>
</template>

<style scoped>

</style>